<script setup lang="ts">
import { useRequest } from 'vue-request'
import { fetchNoticeDetailAPI } from '@/apis/fetchNoticeDetail'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

const id = ref('')
const { data, loading, refresh } = useRequest(
  () => fetchNoticeDetailAPI({ id: id.value }, userInfoStore.userInfo!.token).then(res => res.data?.data),
  { manual: true },
)

onLoad((options) => {
  if (!options?.id)
    return
  id.value = options.id
  refresh()
})
</script>

<template>
  <view class="min-h-screen bg-white px-40rpx">
    <Spacer h="52" />
    <view class="text-44rpx text-#333333 font-semibold leading-62rpx">
      {{ data?.title || '未知' }}
    </view>
    <Spacer h="12" />
    <view class="text-28rpx text-#333333 leading-40rpx">
      {{ data?.create_time || '未知' }}
    </view>
    <Spacer h="32" />
    <Divider w="671" />
    <Spacer h="32" />
    <div class="richtext" v-html="data?.content" />
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'noticeDetail'
style:
  navigationBarTitleText: '通知公告'
</route>

<style>
.richtext img {
  width: 100% !important;
}
</style>
